/**
 * 全球指数列表组件 - 紧凑型卡片布局
 */

import React from 'react';
import { useGlobalIndexes } from '../hooks/useGlobalIndexes';
import { GlobalIndexData } from '@shared/types/market';

// 示意数据
const mockGlobalIndexes = {
  americas: [
    {
      code: 'DJI',
      name: '道琼斯',
      current: 34567.89,
      change: 123.45,
      change_pct: 0.36,
      open: 34444.44,
      close: 34567.89,
      high: 34678.90,
      low: 34321.00,
      volume: 324567890,
      amount: 156789000000,
      timestamp: new Date().toISOString(),
    },
    {
      code: 'GSPC',
      name: '标普500',
      current: 4456.78,
      change: -12.34,
      change_pct: -0.28,
      open: 4469.12,
      close: 4456.78,
      high: 4478.90,
      low: 4445.67,
      volume: 245678901,
      amount: 98765000000,
      timestamp: new Date().toISOString(),
    },
    {
      code: 'IXIC',
      name: '纳斯达克',
      current: 13789.45,
      change: 56.78,
      change_pct: 0.41,
      open: 13732.67,
      close: 13789.45,
      high: 13812.34,
      low: 13698.90,
      volume: 456789012,
      amount: 234567000000,
      timestamp: new Date().toISOString(),
    },
  ] as GlobalIndexData[],
  europe: [
    {
      code: 'FTSE',
      name: '富时100',
      current: 7654.32,
      change: 23.45,
      change_pct: 0.31,
      open: 7630.87,
      close: 7654.32,
      high: 7665.43,
      low: 7621.00,
      volume: 123456789,
      amount: 45678000000,
      timestamp: new Date().toISOString(),
    },
    {
      code: 'GDAXI',
      name: '德国DAX',
      current: 15987.65,
      change: -34.56,
      change_pct: -0.22,
      open: 16022.21,
      close: 15987.65,
      high: 16045.00,
      low: 15956.78,
      volume: 98765432,
      amount: 67890000000,
      timestamp: new Date().toISOString(),
    },
    {
      code: 'FCHI',
      name: '法国CAC40',
      current: 7234.56,
      change: 12.34,
      change_pct: 0.17,
      open: 7222.22,
      close: 7234.56,
      high: 7245.67,
      low: 7215.43,
      volume: 87654321,
      amount: 34567000000,
      timestamp: new Date().toISOString(),
    },
  ] as GlobalIndexData[],
  hongkong: [
    {
      code: 'HSI',
      name: '恒生指数',
      current: 17654.32,
      change: -123.45,
      change_pct: -0.69,
      open: 17777.77,
      close: 17654.32,
      high: 17812.34,
      low: 17623.45,
      volume: 345678901,
      amount: 123456000000,
      timestamp: new Date().toISOString(),
    },
  ] as GlobalIndexData[],
  asia: [
    {
      code: 'N225',
      name: '日经225',
      current: 32456.78,
      change: 234.56,
      change_pct: 0.73,
      open: 32222.22,
      close: 32456.78,
      high: 32567.89,
      low: 32123.45,
      volume: 234567890,
      amount: 345678000000,
      timestamp: new Date().toISOString(),
    },
    {
      code: '000001.SH',
      name: '上证指数',
      current: 3234.56,
      change: 12.34,
      change_pct: 0.38,
      open: 3222.22,
      close: 3234.56,
      high: 3245.67,
      low: 3215.43,
      volume: 456789012,
      amount: 456789000000,
      timestamp: new Date().toISOString(),
    },
  ] as GlobalIndexData[],
};

interface CompactIndexCardProps {
  data: GlobalIndexData;
}

// 格式化大数字（成交量/成交额）
const formatLargeNumber = (num?: number): string => {
  if (!num) return '--';
  if (num >= 1e12) return `${(num / 1e12).toFixed(2)}万亿`;
  if (num >= 1e8) return `${(num / 1e8).toFixed(2)}亿`;
  if (num >= 1e4) return `${(num / 1e4).toFixed(2)}万`;
  return num.toFixed(0);
};

const CompactIndexCard: React.FC<CompactIndexCardProps> = ({ data }) => {
  const isPositive = data.change_pct >= 0;

  return (
    <div
      style={{
        backgroundColor: 'white',
        borderRadius: '8px',
        padding: '16px',
        border: '1px solid #e8e8e8',
        transition: 'all 0.2s',
        cursor: 'pointer',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.12)';
        e.currentTarget.style.borderColor = '#1890ff';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.boxShadow = 'none';
        e.currentTarget.style.borderColor = '#e8e8e8';
      }}
    >
      {/* 标题行 */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '12px',
          paddingBottom: '8px',
          borderBottom: '1px solid #f0f0f0',
        }}
      >
        <div>
          <div
            style={{
              fontSize: '15px',
              fontWeight: '600',
              color: '#333',
              marginBottom: '2px',
            }}
          >
            {data.name}
          </div>
          <div style={{ fontSize: '11px', color: '#999' }}>{data.code}</div>
        </div>
        <div
          style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: isPositive ? '#f6ffed' : '#fff2f0',
            border: `1px solid ${isPositive ? '#b7eb8f' : '#ffccc7'}`,
          }}
        >
          <div
            style={{
              fontSize: '11px',
              color: isPositive ? '#52c41a' : '#ff4d4f',
              fontWeight: '500',
            }}
          >
            {isPositive ? '▲' : '▼'}
          </div>
        </div>
      </div>

      {/* 现价 */}
      <div style={{ marginBottom: '12px' }}>
        <div
          style={{
            fontSize: '24px',
            fontWeight: '700',
            color: isPositive ? '#52c41a' : '#ff4d4f',
            lineHeight: '1',
            marginBottom: '4px',
          }}
        >
          {data.current.toFixed(2)}
        </div>
        <div style={{ display: 'flex', gap: '12px', fontSize: '12px' }}>
          <span
            style={{
              color: isPositive ? '#52c41a' : '#ff4d4f',
              fontWeight: '500',
            }}
          >
            {isPositive ? '+' : ''}
            {data.change.toFixed(2)}
          </span>
          <span
            style={{
              color: isPositive ? '#52c41a' : '#ff4d4f',
              fontWeight: '500',
            }}
          >
            {isPositive ? '+' : ''}
            {data.change_pct.toFixed(2)}%
          </span>
        </div>
      </div>

      {/* 价格信息 */}
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '8px',
          marginBottom: '12px',
          padding: '8px',
          backgroundColor: '#fafafa',
          borderRadius: '4px',
        }}
      >
        <div>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            开盘
          </div>
          <div style={{ fontSize: '13px', color: '#333', fontWeight: '500' }}>
            {data.open?.toFixed(2) || '--'}
          </div>
        </div>
        <div>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            收盘
          </div>
          <div style={{ fontSize: '13px', color: '#333', fontWeight: '500' }}>
            {data.close?.toFixed(2) || '--'}
          </div>
        </div>
        <div>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            最高
          </div>
          <div style={{ fontSize: '13px', color: '#f5222d', fontWeight: '500' }}>
            {data.high?.toFixed(2) || '--'}
          </div>
        </div>
        <div>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            最低
          </div>
          <div style={{ fontSize: '13px', color: '#52c41a', fontWeight: '500' }}>
            {data.low?.toFixed(2) || '--'}
          </div>
        </div>
      </div>

      {/* 成交信息 */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          paddingTop: '8px',
          borderTop: '1px solid #f0f0f0',
        }}
      >
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            成交量
          </div>
          <div style={{ fontSize: '12px', color: '#333', fontWeight: '500' }}>
            {formatLargeNumber(data.volume)}
          </div>
        </div>
        <div style={{ flex: 1, textAlign: 'right' }}>
          <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>
            成交额
          </div>
          <div style={{ fontSize: '12px', color: '#333', fontWeight: '500' }}>
            {formatLargeNumber(data.amount)}
          </div>
        </div>
      </div>
    </div>
  );
};

interface MarketSectionProps {
  title: string;
  icon: string;
  indexes: GlobalIndexData[];
}

const MarketSection: React.FC<MarketSectionProps> = ({ title, icon, indexes }) => {
  return (
    <div style={{ marginBottom: '24px' }}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          marginBottom: '12px',
        }}
      >
        <span style={{ fontSize: '18px' }}>{icon}</span>
        <span
          style={{
            fontSize: '14px',
            fontWeight: '600',
            color: '#555',
          }}
        >
          {title}
        </span>
        <span
          style={{
            fontSize: '12px',
            color: '#999',
            backgroundColor: '#f5f5f5',
            padding: '2px 8px',
            borderRadius: '10px',
          }}
        >
          {indexes.length}
        </span>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: '16px',
        }}
      >
        {indexes.map((index) => (
          <CompactIndexCard key={index.code} data={index} />
        ))}
      </div>
    </div>
  );
};

const GlobalIndexList: React.FC = () => {
  const { data: globalIndexes, isLoading, isError } = useGlobalIndexes();

  // 使用真实数据或示意数据
  const displayIndexes = globalIndexes || mockGlobalIndexes;

  if (isLoading) {
    return (
      <div
        style={{
          backgroundColor: 'white',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          padding: '32px',
        }}
      >
        <div style={{ textAlign: 'center' }}>
          <div
            style={{
              display: 'inline-block',
              width: '40px',
              height: '40px',
              border: '4px solid #f0f0f0',
              borderTopColor: '#1890ff',
              borderRadius: '50%',
              animation: 'spin 1s linear infinite',
              marginBottom: '12px',
            }}
          />
          <div style={{ fontSize: '14px', color: '#999' }}>加载中...</div>
        </div>
      </div>
    );
  }

  return (
    <div
      style={{
        backgroundColor: 'white',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        padding: '20px',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '20px',
        }}
      >
        <h2
          style={{
            fontSize: '18px',
            fontWeight: '600',
            color: '#333',
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
          }}
        >
          🌍 全球主要指数
        </h2>
        {isError && (
          <span
            style={{
              fontSize: '12px',
              color: '#faad14',
              backgroundColor: '#fffbe6',
              padding: '4px 8px',
              borderRadius: '4px',
              border: '1px solid #ffe58f',
            }}
          >
            示意数据
          </span>
        )}
      </div>

      {/* 美洲市场 */}
      <MarketSection
        title="美洲市场"
        icon="🌎"
        indexes={displayIndexes.americas || []}
      />

      {/* 欧洲市场 */}
      <MarketSection
        title="欧洲市场"
        icon="🌍"
        indexes={displayIndexes.europe || []}
      />

      {/* 香港市场 */}
      <MarketSection
        title="香港市场"
        icon="🇭🇰"
        indexes={displayIndexes.hongkong || []}
      />

      {/* 亚太市场 */}
      <MarketSection
        title="亚太市场"
        icon="🌏"
        indexes={displayIndexes.asia || []}
      />
    </div>
  );
};

export default GlobalIndexList;

